<template>
    <div class="header">
        <div class="headerLeft">
            <router-link to="/Login"><span class="glyphicon glyphicon-user" id="headerUser" v-if="bln"></span></router-link >
            <router-link to=""><span class="glyphicon glyphicon-chevron-left" id="headerRturn" v-if="!bln" @click="fn"></span></router-link>
        </div>
        <div class="headerMiddle">
            <router-link to=""><div v-if="cln"><img src="../assets/img/logo.png" alt=""></div></router-link>
            <router-link to="/Tab"><input type="text" class="headerMiddleInput" v-if="!cln"></router-link >
        </div>
        <div class="headerRight">
            <router-link to="/Tab"><span class="glyphicon glyphicon-th-list" id="headerList" v-if="bln"></span></router-link>
            <router-link :to={path:url}><span style="font-size: 16px;line-height: 0.7rem;" v-if="!bln" @click="getText">{{title}}</span></router-link>
        </div>
    </div>
</template>

<script>
    export default {
        props:['title','url'],
        methods:{
            fn(){
                this.$router.go(-1);
            },
            getText(e){
                console.log(this.$route.path);
                console.log(e.target.innerText);
            }
        },
        mounted(){
            console.log(this.$route.path);
            if(this.$route.path==="/"){
                this.bln=true;
                this.cln=true;
            }else if(this.$route.path==="/Login"||this.$route.path==="/Register"){
                this.bln=false;
                this.cln=true;
            }else if(this.$route.path==="/Tab"){
                this.bln=false;
                this.cln=false;
            }
        },
        watch:{
            '$route.path':function (newPath,oldPath) {
                if(newPath==="/Login"||newPath==="/Register"){
                    this.bln=false;
                    this.cln=true;
                }else if(newPath==="/"){
                    this.bln=true;
                    this.cln=true;
                }else if(newPath==="/Tab"){
                    this.bln=false;
                    this.cln=false;
                }
            }
        },
        data(){
            return {
                bln:true,
                cln:true,
                dln:true,
            }
        }
    }
</script>

<style scoped>
    .header{
        background:hotpink;
        height:0.9rem;
        position:fixed;
        left:0;
        top:0;
        right:0;
        display: flex;
        z-index: 9999;

    }
    span{
        color:white;
        font-size: 0.6rem;
        position: relative;
        top: 0.15rem;
        left: 0.15rem;
    }
    .headerLeft{
        flex:1;
    }
    .headerMiddle{
        flex:6;
        line-height: 0.8rem;
        text-align: center;
    }
    .headerMiddle img{
        width: 50%;
        height: 40%;
    }
    .headerRight{
        flex:1;
    }
    .headerMiddleInput{
        outline: none;
        border: none;
        height: .6rem;
        width: 95%;
        position: relative;
        top:.05rem;
    }
</style>